<template>
<div>
      <!--/路径 -->
	    <div class="w3l-breadcrumbs">
		    <nav id="breadcrumbs" class="breadcrumbs">
			   <div class="container page-wrapper">
			     <a @click="toPage(0)">用户首页</a> » <span class="breadcrumb_last" aria-current="page">购票</span>
			   </div>
		    </nav>
	    </div>
      <!--//路径 -->
      <!--
    <div style="height:400px; width:100%;">
      <div style="width:300px;height:100%;float: left">
        <div>
          <img :src="movie.mov_img_path" style="width:250px" />
        </div>
      </div>
      <div style="width:70%;height:100%;">
        电影名称：{{movie.mov_name}}
        <br />
        简介：{{movie.mov_desc}}
        <br />
        评分：{{movie.mov_score}}
        <br />
        类型：{{movie.mov_label}}
        <br />
        时长：{{movie.mov_time}}
        <br />
        <br />
        <div>
          <a-button type="primary" @click="toDetail(movie.mov_id)">电影详情</a-button>
        </div>
      </div>
      <h2>影院列表</h2>
      <br>
      <div v-for="item in cinemaList" :key="item.cnm_id" style="padding:2px">
        <div style="height:100px">
          <div style="width:300px;float:left">
            {{item.cnm_name}}<br>
            地址：{{item.cnm_address}}
          </div>
          <div style="width:100%" align="right">
            $30 &nbsp; 
            <a-button type="primary" @click="toCinema(item.cnm_id)">选座购票</a-button>
          </div>
          <a-divider />
        </div>
      </div>
    </div>
    -->
  	<!-- /电影信息-->
	<div class="w3l-ab-grids py-5 banner">
		<div  class="container py-lg-4">
			<div class="row ab-grids-sec align-items-center"  style="width: 900px;">
				<div class="col-lg-6 ab-right" style="width: 300px;">
					<img class="img-fluid" :src="movie.mov_img_path" style="height: 450px;border:6px solid #fff;">
				</div>
				<div class="col-lg-6 ab-left pl-lg-4 mt-lg-0 mt-5"   style="width: 500px;">
					<h3 class="hny-title" style="color: #fff;">{{movie.mov_name}}</h3>
					<p class="mt-3" style="color: #fff;">简介: {{movie.mov_desc}}</p>
                    <p class="mt-3" style="color: #fff;">类型：{{movie.mov_label}}</p>
                    <p class="mt-3" style="color: #fff;">时长：{{movie.mov_time}}min</p>
					<div class="ready-more mt-4">
           
            <table>
              <tr>
                <td>
                   <a class="btn read-button" style="font-size:22px;color: #fff;" @click="toDetail(movie.mov_id)">详情</a>
                </td>
				<td>
					 <div style="width:40px;"></div>
				</td>
                <td>
                    <span class="mt-3" style="color:#fff;">评分：</span><h3 class="hny-title" style="color:gold;">{{movie.mov_score}}</h3>
                </td>
              </tr>
            </table>
					</div>
				</div>
			</div>
		   

		</div>
	</div>
	<!-- //电影信息--> 
  	<!-- 4部推荐电影 -->
	<section class="w3l-grids">
		<div class="grids-main py-5">
			<div class="container py-lg-3">
				<div class="headerhny-title">
					<div class="w3l-title-grids" style="border-bottom: 12px;height: 70px;">
						<div class="headerhny-left">
							<h3 class="hny-title">电影院</h3>
						</div>
						<div class="headerhny-right text-lg-right">
							<h4><a class="show-title" href="genre.html">查看更多热映</a></h4>
						</div>
					</div>
	<!-- 可选择的电影院 -->				
    <div v-for="item in cinemaList" :key="item.cnm_id" style="padding:2px">
        <div style="height:100px">
          <div class="movcin1" style="width:300px;float:left；">
            <span style="font-size:22px;">{{item.cnm_name}}</span><br>
			<span style="font-weight: 400;">地址：{{item.cnm_address}}</span>
          </div>
          <div class="movcin3" style="width:50%;float:right;" align="right">
            ￥{{item.price}}起 &nbsp;  
            <a-button type="primary" @click="toCinema(item.cnm_id)">选座购票</a-button>
          </div>
          <a-divider />
        </div>
    </div>
				</div>
			</div>
		</div>
	</section>
	<!-- 4部推荐电影 --> 
  	<!-- 底部导航栏 -->
	<div class="w3l-footer">
		<section class="footer-inner-main">
			<div class="below-section">
				<div class="container">
					<div class="copyright-footer">
						<div class="columns text-lg-left">
							<p>Copyright &copy; 2020.Company name All rights reserved.</p>
						</div>

						<ul class="social text-lg-right">
							<li><a href="#facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
							</li>
							<li><a href="#linkedin"><span class="fa fa-linkedin" aria-hidden="true"></span></a>
							</li>
							<li><a href="#twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
							</li>
							<li><a href="#google"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
							</li>

						</ul>
					</div>
				</div>
			</div>
			<!-- copyright -->
			<!-- move top -->
			<button onclick="topFunction()" id="movetop" title="Go to top">
				<span class="fa fa-arrow-up" aria-hidden="true"></span>
			</button>
			<!-- /move top -->

		</section>
	</div>
	<!--//底部导航栏 -->

</div>
</template>

<script setup>
import { ref, defineComponent } from "vue";
import { useRouter, useRoute } from "vue-router";

import { get, post } from "@/common";

const router = useRouter();
const route = useRoute();

let mov_id;
const movieList = ref([]);
const movie = ref({});

const getMov_id = () => {
  mov_id = route.query.mov_id;
  console.log(mov_id);
};

getMov_id();

const getMoviesById = () => {
  get("/info/movie/moviebyid", { id: mov_id }).then(res => {
    movieList.value = res.data;
    movie.value = movieList.value[0];
  });
};

getMoviesById();

const toDetail = id => {
  router.push({ path: "/home/movie_detail", query: { mov_id: id } });
};

const toCinema = (temp_cnm_id) => {
  router.push({ path: "/home/cust_cinema", query: { mov_id: mov_id, cnm_id:temp_cnm_id } });
}

const cinemaList = ref([]);
const getCinemaList = () => {
  get("/search/c_minprice/minprice", { id: mov_id }).then(res => {
    cinemaList.value = res.data;
	console.log(cinemaList);
  });
};

getCinemaList();
</script>

<style>
@import'../css/cinema.css';
@import'../css/style-starter.css';
@import'../css/base.css';
@import'../css/bootstrap-grid.css';
</style>